<template>
  <panel title="空气质量">
    <div class="ml20 mr20">
      <x-row>
        <x-col :span="24">
          <radar :width="chartWidth" :height="chartHeight" :options="chartOptions" class="mt20 mb20"></radar>
        </x-col>
      </x-row>
    </div>
  </panel>
</template>

<script>
export default {
  name: 'AirQuality',

  data () {
    return {
      chartWidth: '100px',
      chartHeight: '100px',
      statistic: null,
      chartOptions: null
    }
  },

  mounted () {
    setTimeout(this.initialize, 0)
  },

  methods: {
    initialize () {
      this.chartWidth = `${(this.$el.clientWidth - 70)}px`
      this.chartHeight = `${this.$el.clientHeight - 71}px`
      this.statistic = {
        'AQI': 105,
        'PM2.5': 67,
        'SO2': 47,
        'PM10': 102,
        'CO': 2,
        'NO2': 19
      }
      this.chartOptions = {
        radar: {
          indicator: [
            {name: 'AQI', max: 300},
            {name: 'PM2.5', max: 250},
            {name: 'SO2', max: 100},
            {name: 'PM10', max: 300},
            {name: 'CO', max: 5},
            {name: 'NO2', max: 200}
          ]
        },
        series: [{ // date, AQIindex, PM2.5, PM10, CO, NO2, SO2
          data: [_.values(this.statistic)],
          itemStyle: {
            normal: {
              color: '#549C17'
            }
          },
          areaStyle: {
            normal: {
              opacity: 0.4
            }
          }
        }]
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../../../assets/stylus/common'

.air-quality {
  .air-quality__label {
    font-size: 36px;
    margin: 10px 0;
    text-align: center;

    // 优
    &.excellent {
      color: green;
    }

    // 良
    &.fine {
      color: yellow;
    }

    // 差
    &.bad {
      color: red;
    }

    // 极差
    &.terrible {
      color: purple;
    }
  }

  .air-quality__item {
    line-height: 24px;
    font-size: 12px;
    color: #99A1A8;
  }
}
</style>
